<?php
/**
 * Yii view index
 *
 * @author nguyenmanhluu
 * @since Sep 13, 2013 - 6:32:29 PM
 */
?>
<div class="row-fluid">
    <div class="span12">
        <div class="grid">
            <div class="grid-title">
                <div class="pull-left">
                    <?php echo Yii::t('statistic', 'Summary') ?>
                </div>
                <div class="pull-right">

                </div>
                <div class="clear"></div>   
            </div>

            <!-- Information data -->
            <div class="information-data">
                <div class="data data-last">
                    <p class="date-title">Đang Online</p>
                    <p class="date-figures">
                        <a href="#user-online">                            
                            <?php echo StatOnline::countUserOnline() ?>
                        </a>
                    </p>
                    <p class="date-figures">
                        <?php echo date('H:i') ?>
                    </p>
                </div>
                <div class="data">
                    <p class="date-title">Hôm nay, <?php echo date('d/m') ?></p>
                    <p class="date-figures">
                        <?php echo StatCounter::today(StatCounter::TYPE_VISITORS); ?>
                    </p>
                    <p class="date-figures">
                        <?php echo StatCounter::today(); ?>
                    </p>
                </div>                

                <div class="data">
                    <p class="date-title">Tháng <?php echo date('m') ?></p>
                    <p class="date-figures">
                        <?php echo StatCounter::thisMonth(StatCounter::TYPE_VISITORS); ?>
                    </p>
                    <p class="date-figures">
                        <?php echo StatCounter::thisMonth(); ?>
                    </p>
                </div>
                <div class="data">
                    <p class="date-title">Năm <?php echo date('Y') ?></p>
                    <p class="date-figures">
                        <?php echo StatCounter::thisYear(StatCounter::TYPE_VISITORS); ?>
                    </p>
                    <p class="date-figures">
                        <?php echo StatCounter::thisYear(); ?>
                    </p>
                </div>
                <div class="data">
                    <p class="date-title">Tổng cộng</p>
                    <p class="date-figures">
                        <?php echo StatCounter::total(StatCounter::TYPE_VISITORS); ?>
                    </p>
                    <p class="date-figures">
                        <?php echo StatCounter::total(); ?>
                    </p>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>
<div class="row-fluid">
    <!-- Information data end -->
    <div class="span12">
        <div class="grid">
            <div class="grid-title">
                <div class="pull-left">
                    <?php echo Yii::t('statistic', 'Daily') ?>
                </div>
                <div class="pull-right">

                </div>
                <div class="clear"></div>   
            </div>
            <div class="grid-content overflow">
                <?php $stats = StatCounter::getStat(); ?>
                <table class="chart2">
                    <thead>
                        <tr>
                            <th></th>
                            <th style="color: #FF8400">Views</th>                            
                            <th style="color: #11b0ea">Visitors</th>                            
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($stats as $stat): ?>
                            <tr>
                                <th><?php echo $stat->day ?></th>
                                <td><?php echo $stat->sumViews ?></td>
                                <td><?php echo $stat->sumVisitors ?></td>
                            </tr>    
                        <?php endforeach; ?>                      
                    </tbody>
                </table>                
            </div>
        </div>
        <!--Statistics Box END-->    
    </div>
</div>


<script>
    $(function () {
        // CHARts        
        /* table chart */
        $("table.chart2").each(function () {
            var colors = [];
            $("table.chart2 thead th:not(:first)").each(function () {
                colors.push($(this).css("color"));
            });
            $(this).graphTable({
                series: 'columns', position: 'replace', width: '100%', height: '250px', colors: colors
            }, {xaxis: {tickSize: 1, },
                yaxis: {
//                    max: 100,
//                    min: 0
                }, series: {
                    points: {show: true},
                    lines: {show: true, fill: false, steps: false},
                }
            });
        });

    });
</script>

<div class="row-fluid">  
    <!--Bars Start-->
    <div class="grid span12">
        <div class="grid-title">
            <div class="pull-left"><?php echo Yii::t('statistic', 'Hourly') ?></div>            
            <div class="clear"></div>   
        </div>
        <div class="grid-content">
            <div class="bars"></div>
        </div>
    </div>
    <!--Bars END-->
</div>

<script>
    $(function () {
        var previousPoint;
        var d1 = [];
        var d2 = [];
<?php foreach ($hourly as $item): ?>
            d1.push([<?php echo $item->hour ?>, <?php echo $item->sumVisitors ?>]);
            d2.push([<?php echo $item->hour ?>, <?php echo $item->sumViews ?>]);
<?php endforeach; ?>

        var ds = new Array();

        ds.push({
            data: d1,
            bars: {
                show: true,
                barWidth: 0.2,
                order: 2,
                lineWidth: 2
            }

        });
        ds.push({
            data: d2,
            bars: {
                show: true,
                barWidth: 0.2,
                order: 1
            }
        });

        //tooltip function
        function showTooltip(x, y, contents, areAbsoluteXY) {
            var rootElt = 'body';

            $('<div id="tooltip" class="tooltip-with-bg">' + contents + '</div>').css({
                position: 'absolute',
                display: 'none',
                'z-index': '1010',
                top: y,
                left: x,
                border: '1px solid #d5d5de',
                padding: '3px',
                'background-color': '#ffffff',
            }).prependTo(rootElt).show();
        }

        //Display graph
        $.plot($(".bars"), ds, {
            grid: {
                hoverable: true
            }
        });

        //add tooltip event
        $(".bars").bind("plothover", function (event, pos, item) {
            if (item) {
                if (previousPoint != item.datapoint) {
                    previousPoint = item.datapoint;

                    //delete de precedente tooltip
                    $('.tooltip-with-bg').remove();

                    var x = item.datapoint[0];

                    //All the bars concerning a same x value must display a tooltip with this value and not the shifted value
                    if (item.series.bars.order) {
                        for (var i = 0; i < item.series.data.length; i++) {
                            if (item.series.data[i][3] == item.datapoint[0])
                                x = item.series.data[i][0];
                        }
                    }

                    var y = item.datapoint[1];

                    showTooltip(item.pageX + 5, item.pageY + 5, x + "h : " + y);

                }
            }
            else {
                $('.tooltip-with-bg').remove();
                previousPoint = null;
            }

        });
    });
</script>

<div class="row-fluid">
    <!-- Information data end -->
    <div class="span12">
        <div class="grid">
            <div class="grid-title">
                <div class="pull-left">
                    <?php echo Yii::t('statistic', 'Weekdaily') ?>
                </div>
                <div class="pull-right">

                </div>
                <div class="clear"></div>   
            </div>
            <div class="grid-content overflow">                
                <table class="chart2">
                    <thead>
                        <tr>
                            <th></th>
                            <th style="color: #FF8400">Views</th>                            
                            <th style="color: #11b0ea">Visitors</th>                            
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($weekday_stats as $stat): ?>
                            <tr>
                                <th><?php echo $stat->weekday; ?></th>
                                <td><?php echo $stat->sumViews ?></td>
                                <td><?php echo $stat->sumVisitors ?></td>
                            </tr>    
                        <?php endforeach; ?>                      
                    </tbody>
                </table>                
            </div>
        </div>
        <!--Statistics Box END-->    
    </div>
</div>


<script>
    $(function () {
        // CHARts        
        /* table chart */
        $("table.chart2").each(function () {
            var colors = [];
            $("table.chart2 thead th:not(:first)").each(function () {
                colors.push($(this).css("color"));
            });
            $(this).graphTable({
                series: 'columns', position: 'replace', width: '100%', height: '250px', colors: colors
            }, {xaxis: {tickSize: 1, },
                yaxis: {
//                    max: 100,
//                    min: 0
                }, series: {
                    points: {show: true},
                    lines: {show: true, fill: false, steps: false},
                }
            });
        });

    });
</script>
